<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Using the Editor&#x27;s instance</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Using the Editor&#x27;s instance</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>Use the Editor's instance to query the iframe</p>
</div>

<div class="example">
    <style>
    #editor_cont {
        width: 600px;
        border: 1px solid #999;
        margin: 2em;
        background-color: #f2f2f2;
    }
    #editor {
        height: 265px;
        background-color: #fff;
    }
    #buttons, #out {
        padding: 10px;
    }
    #buttons {
        border-bottom: 1px solid #999;
    }
    #out {
        font-weight: bold;
        border-top: 1px solid #999;
    }


</style>

<p>Click the buttons below to query the Editor for its contents. You can even modify the contents and click them again to see the difference.</p>

<div id="editor_cont">
    <div id="buttons">
        <button id="btags"># B tags?</button>
        <button id="itags"># I tags?</button>
        <button id="ctags"># with class foo?</button>
    </div>
    <div id="editor"></div>
    <div id="out">&nbsp;</div>
</div>



<script>
YUI().use('editor', function(Y) {

    var log = function(str) {
        Y.one('#out').set('innerHTML', str);
    };

    //Create the Base Editor
    var editor = new Y.EditorBase({
        content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>',
        extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
    });
    //Rendering the Editor
    editor.render('#editor');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('b');
        
        log('There are (' + bs.size() + ') B tags in the iframe.');
    }, '#btags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('i');
        
        log('There are (' + bs.size() + ') I tags in the iframe.');
    }, '#itags');

    Y.on('click', function(e) {
        var inst = editor.getInstance(),
            bs = inst.all('.foo');
        
        log('There are (' + bs.size() + ') items with class foo in the iframe.');
    }, '#ctags');

});

</script>


</div>

<h3 id="working-with-editorbase">Working with EditorBase</h3>
<p><code>EditorBase</code> is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>

<p>When the Editor is created, it creates a YUI instance inside itself and attaches that instance to the editable iframe. 
This means that you now have the full power of YUI 3 inside the Editor iframe. You can use Event, Stylesheet, Node and even DD
inside the iframe, without having to load all the JavaScript inside the document. In this example we will show how to use the 
internal YUI instance to get Node instances from the Editor. </p>

<p>Getting access to this instance is simple. Just use the <code>getInstance</code> method on the Editor instance.</p>


<h3 id="creating-the-editor">Creating the Editor</h3>
<p>In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.</p>

<pre class="code prettyprint">YUI().use(&#x27;editor&#x27;, function(Y) {

    &#x2F;&#x2F;Create the Base Editor
    var editor = new Y.EditorBase({
        content: &#x27;&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;&#x2F;span&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&#x27;,
        extracss: &#x27;.foo { font-weight: normal; color: black; background-color: yellow; }&#x27;
    });
    
    &#x2F;&#x2F;Rendering the Editor
    editor.render(&#x27;#editor&#x27;);

});</pre>


<h3 id="full-example-source">Full Example Source</h3>

<h4 id="html">HTML</h4>
<pre class="code prettyprint">&lt;div id=&quot;editor_cont&quot;&gt;
    &lt;div id=&quot;buttons&quot;&gt;
        &lt;button id=&quot;btags&quot;&gt;# B tags?&lt;&#x2F;button&gt;
        &lt;button id=&quot;itags&quot;&gt;# I tags?&lt;&#x2F;button&gt;
        &lt;button id=&quot;ctags&quot;&gt;# with class foo?&lt;&#x2F;button&gt;
    &lt;&#x2F;div&gt;
    &lt;div id=&quot;editor&quot;&gt;&lt;&#x2F;div&gt;
    &lt;div id=&quot;out&quot;&gt;&amp;nbsp;&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<h4 id="css">CSS</h4>
<pre class="code prettyprint">#editor_cont {
    width: 600px;
    border: 1px solid #999;
    margin: 2em;
    background-color: #f2f2f2;
}
#editor {
    height: 265px;
    background-color: #fff;
}
#buttons, #out {
    padding: 10px;
}
#buttons {
    border-bottom: 1px solid #999;
}
#out {
    font-weight: bold;
    border-top: 1px solid #999;
}</pre>



<h4 id="javascript">Javascript</h4>
<pre class="code prettyprint">YUI().use(&#x27;editor&#x27;, function(Y) {

    var log = function(str) {
        Y.one(&#x27;#out&#x27;).set(&#x27;innerHTML&#x27;, str);
    };

    &#x2F;&#x2F;Create the Base Editor
    var editor = new Y.EditorBase({
        content: &#x27;&lt;p&gt;&lt;b&gt;This is &lt;i class=&quot;foo&quot;&gt;a test&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&lt;p&gt;&lt;b style=&quot;color: red; font-family: Comic Sans MS&quot;&gt;This is &lt;span class=&quot;foo&quot;&gt;a test&lt;&#x2F;span&gt;&lt;&#x2F;b&gt;&lt;&#x2F;p&gt;&#x27;,
        extracss: &#x27;.foo { font-weight: normal; color: black; background-color: yellow; }&#x27;
    });
    &#x2F;&#x2F;Rendering the Editor
    editor.render(&#x27;#editor&#x27;);

    Y.on(&#x27;click&#x27;, function(e) {
        var inst = editor.getInstance(),
            bs = inst.all(&#x27;b&#x27;);
        
        log(&#x27;There are (&#x27; + bs.size() + &#x27;) B tags in the iframe.&#x27;);
    }, &#x27;#btags&#x27;);

    Y.on(&#x27;click&#x27;, function(e) {
        var inst = editor.getInstance(),
            bs = inst.all(&#x27;i&#x27;);
        
        log(&#x27;There are (&#x27; + bs.size() + &#x27;) I tags in the iframe.&#x27;);
    }, &#x27;#itags&#x27;);

    Y.on(&#x27;click&#x27;, function(e) {
        var inst = editor.getInstance(),
            bs = inst.all(&#x27;.foo&#x27;);
        
        log(&#x27;There are (&#x27; + bs.size() + &#x27;) items with class foo in the iframe.&#x27;);
    }, &#x27;#ctags&#x27;);

});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#working-with-editorbase">Working with EditorBase</a>
</li>
<li>
<a href="#creating-the-editor">Creating the Editor</a>
</li>
<li>
<a href="#full-example-source">Full Example Source</a>
<ul class="toc">
<li>
<a href="#html">HTML</a>
</li>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#javascript">Javascript</a>
</li>
</ul>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Use the Editor&#x27;s instance to query the iframe">
                                        <a href="editor-instance.html">Using the Editor&#x27;s instance</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using the Editor&#x27;s built in events.">
                                        <a href="editor-events.html">Editor Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using the Editor&#x27;s nodeChange Event.">
                                        <a href="editor-nodechange.html">NodeChange Event</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating and using your own ExecCommands">
                                        <a href="editor-exec.html">ExecCommands</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
